<template>
  <div class="aliali-banner">
    <div class="banner-container">
      <div class="carousel-wrapper">
        <!-- 轮播图主体 -->
        <div
            class="carousel-track"
            :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
            @mouseenter="pauseAutoPlay"
            @mouseleave="resumeAutoPlay"
        >
          <div
              v-for="(banner, index) in banners"
              :key="banner.id"
              class="carousel-item"
              :class="{ active: currentIndex === index }"
          >
            <img
                :src="banner.image"
                :alt="banner.title"
                class="banner-image"
                @load="handleImageLoad"
                @error="handleImageError"
            />
            <div class="banner-content">
              <div class="banner-info" :style="{ background: banner.color }">
                <div class="banner-text">
                  <h3 class="banner-title">{{ banner.title }}</h3>
                  <p class="banner-desc">{{ banner.desc }}</p>
                </div>
                <button class="banner-button" @click="handleBannerClick(banner)">
                  查看详情
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 导航按钮 -->
        <button class="nav-btn prev" @click="prevSlide" aria-label="上一张">
          <span class="nav-icon">‹</span>
        </button>
        <button class="nav-btn next" @click="nextSlide" aria-label="下一张">
          <span class="nav-icon">›</span>
        </button>

        <!-- 指示器 -->
        <div class="carousel-indicators">
          <button
              v-for="(_, index) in banners"
              :key="index"
              class="indicator"
              :class="{ active: currentIndex === index }"
              @click="goToSlide(index)"
              :aria-label="`切换到第 ${index + 1} 张`"
          />
        </div>

        <!-- 加载状态 -->
        <div v-if="imageLoading" class="loading-overlay">
          <div class="loading-spinner"></div>
        </div>
      </div>

      <!-- 右侧推广位 -->
      <div class="promotion-sidebar">
        <div class="promotion-item" v-for="promo in promotions" :key="promo.id">
          <img :src="promo.image" :alt="promo.title" class="promo-image"/>
          <div class="promo-info">
            <span class="promo-title">{{ promo.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import {useRouter} from 'vue-router'
import ImageError from '@/image/image-error.svg'

const props = defineProps({
  banners: {
    type: Array,
    default: () => []
  },
  autoPlay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 5000
  }
})

const emit = defineEmits(['banner-click'])

const router = useRouter()
const currentIndex = ref(0)
const isPaused = ref(false)
const imageLoading = ref(true)

// 推广位数据
const promotions = ref([
  {
    id: 1,
    image: 'https://i0.hdslb.com/bfs/active/4c19f0f0c8c1c2c3c4c5c6c7c8c9c0c1c2c3c4c5c6.jpg',
    title: '大会员优惠',
    link: '/vip'
  },
  {
    id: 2,
    image: 'https://i0.hdslb.com/bfs/active/5d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6s7t8u9v0.jpg',
    title: '游戏中心',
    link: '/game-center'
  }
])

// 自动播放控制
let autoPlayTimer = null

const startAutoPlay = () => {
  if (!props.autoPlay || props.banners.length <= 1) return

  autoPlayTimer = setInterval(() => {
    if (!isPaused.value) {
      nextSlide()
    }
  }, props.interval)
}

const pauseAutoPlay = () => {
  isPaused.value = true
}

const resumeAutoPlay = () => {
  isPaused.value = false
}

// 幻灯片控制
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % props.banners.length
}

const prevSlide = () => {
  currentIndex.value = currentIndex.value > 0 ? currentIndex.value - 1 : props.banners.length - 1
}

const goToSlide = (index) => {
  currentIndex.value = index
}

// 图片加载处理
const handleImageLoad = () => {
  imageLoading.value = false
}

const handleImageError = (event) => {
  imageLoading.value = false
  console.error('Banner image failed to load:', event)
  // 可以设置默认图片
  event.target.src = ImageError
}

// 横幅点击处理
const handleBannerClick = (banner) => {
  emit('banner-click', banner)
  if (banner.link) {
    if (banner.link.startsWith('http')) {
      window.open(banner.link, '_blank')
    } else {
      router.push(banner.link)
    }
  }
}

onMounted(() => {
  startAutoPlay()
})

onUnmounted(() => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
  }
})
</script>

<style scoped>
.aliali-banner {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-container {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  height: 200px;
}

.carousel-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-item {
  flex: 0 0 100%;
  position: relative;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.carousel-item.active .banner-image {
  transform: scale(1.02);
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.banner-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1200px;
  margin: 0 auto;
}

.banner-text {
  flex: 1;
}

.banner-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.banner-desc {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.banner-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.banner-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* 导航按钮 */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.nav-btn.prev {
  left: 16px;
}

.nav-btn.next {
  right: 16px;
}

.nav-icon {
  font-size: 20px;
  font-weight: bold;
}

/* 指示器 */
.carousel-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #00a1d6;
  transform: scale(1.2);
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* 加载状态 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #00a1d6;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 推广侧边栏 */
.promotion-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promotion-item {
  position: relative;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.promotion-item:hover {
  transform: translateY(-2px);
}

.promo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 8px;
  color: white;
}

.promo-title {
  font-size: 12px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-container {
    grid-template-columns: 1fr;
    height: auto;
  }

  .promotion-sidebar {
    display: none;
  }

  .banner-title {
    font-size: 18px;
  }

  .banner-desc {
    font-size: 12px;
  }

  .nav-btn {
    width: 32px;
    height: 32px;
  }

  .nav-icon {
    font-size: 16px;
  }
}
</style>